@extends('admin.layouts.head')

@section('content')
    <body>
    <div id="app">
        <div class="wrapper -header-fixed">

        @include('admin.layouts.navbar')
        @include('admin.layouts.sidebar')

        <!-- 内容页开始-->
            <div class="content-container">
                <div class="container-fluid">
                    <div class="page-content">

                        <nav aria-label="breadcrumb">
                            <ol class="breadcrumb">
                                <li class="breadcrumb-item"><a href="{{ route('admin.dashboard') }}">仪表盘</a></li>
                                <li class="breadcrumb-item active" aria-current="page">订单列表</li>
                            </ol>
                        </nav>
                        @verbatim
                        <div class="card">
                            <div class="card-body">

                                <div id="vueApp">
                                    <div class="content-box">

                                        <div class="top-bar" style="padding: 20px 0;">
                                            <el-select clearable v-model="queryForm.status" placeholder="请选择状态" style="width: 240px">
                                                <el-option label="待发货" value="1"></el-option>
                                                <el-option label="运输中" value="2"></el-option>
                                                <el-option label="已收货" value="3"></el-option>
                                            </el-select>

                                            <el-input v-model="queryForm.union_id" placeholder="请输入union_id" style="width: 240px"></el-input>

                                            <el-button type="primary" @click="search">搜索</el-button>
                                        </div>


                                        <el-table
                                            :data="orderList"
                                            border
                                            size="mini"
                                            style="width: 100%">
                                            <el-table-column
                                                prop="id"
                                                label="ID"
                                                width="80"
                                            >
                                            </el-table-column>
                                            <el-table-column
                                                prop="unionid"
                                                label="union_id"
                                            >
                                            </el-table-column>
                                            <el-table-column
                                                prop="goods_title"
                                                label="商品"
                                            >
                                            </el-table-column>
                                            <el-table-column
                                                label="图片"
                                                width="100"
                                            >
                                                <template slot-scope="scope">
                                                    <el-image
                                                        style="width: 60px; height: 60px"
                                                        :src="scope.row.image"
                                                        :preview-src-list="[scope.row.image]"
                                                        fit="cover"></el-image>
                                                </template>
                                            </el-table-column>
                                            <el-table-column
                                                prop="integral"
                                                label="积分"
                                                width="80"
                                            >
                                            </el-table-column>
                                            <el-table-column
                                                label="状态"
                                                width="80"
                                            >
                                                <template slot-scope="scope">
                                                    <el-tag v-if="scope.row.status === 1">待发货</el-tag>
                                                    <el-tag type="info" v-if="scope.row.status === 2">运输中</el-tag>
                                                    <el-tag type="success" v-if="scope.row.status === 3">已签收</el-tag>
                                                </template>
                                            </el-table-column>
                                            <el-table-column
                                                prop="post_no"
                                                label="运单号"
                                            >
                                            </el-table-column>
                                            <el-table-column
                                                prop="create_time"
                                                width="160"
                                                label="兑换时间"
                                            >
                                            </el-table-column>
                                            <el-table-column
                                                label="操作"
                                                width="200"
                                            >
                                                <template slot-scope="scope">
                                                    <el-button @click="getAddress(scope.row.address_id)" type="primary" round plain size="small">查看地址</el-button>
                                                    <el-button v-if="scope.row.status === 1" type="danger" round plain size="small" @click="postOrder(scope.row.id)">发货</el-button>
                                                    <el-button v-if="scope.row.status === 2" type="danger" round plain size="small" @click="postOrder(scope.row.id)">修改运单</el-button>
                                                </template>
                                            </el-table-column>
                                        </el-table>

                                        <el-pagination
                                            style="margin-top: 20px"
                                            background
                                            layout="prev, pager, next"
                                            @current-change="pageChange"
                                            :current-page="curPage"
                                            :page-count="totalPage">
                                        </el-pagination>


                                        <!-- 地址窗口 -->
                                        <el-dialog
                                            title="收货地址"
                                            :visible.sync="addressShow"
                                            width="600"
                                        >
                                            <div class="save-win" style="margin-right: 30px;">
                                                收件人：{{address.nickname}} <br><br>
                                                电话：{{address.mobile}} <br><br>
                                                地址：{{address.address}}
                                            </div>
                                        </el-dialog>

                                    </div>

                            </div> <!-- .card-body -->
                        </div> <!-- .card -->
                        @endverbatim
                    </div> <!-- .page-content -->
                </div> <!-- .container-fluid -->
            </div> <!-- .content-container -->
        </div> <!-- .wrapper -->
    </div> <!-- #app -->

    @include('admin.layouts.vuehead')

    <script>
        const vueApp = new Vue({
            el: '#vueApp',
            data() {
                return {
                    queryForm: {
                        status: '',
                        union_id: '',
                        page: 1,
                    },
                    orderList: [],
                    totalPage: 0,
                    curPage: 0,
                    addressShow: false,
                    address: {},
                }
            },
            mounted() {
                this.getOrderList()
            },
            watch: {

            },
            methods: {
                getOrderList() {
                    adminApi_orderList(this.queryForm).then(res => {
                        this.orderList = res.data.data
                        this.totalPage = res.data.last_page
                        this.curPage = res.data.current_page
                    })
                },
                pageChange(p) {
                    this.queryForm.page = p
                    this.getOrderList()
                },
                search() {
                    this.queryForm.page = 1
                    this.getOrderList()
                },
                getAddress(id) {
                    adminApi_getAddress({id}).then(res => {
                        this.addressShow = true
                        this.address = res.data
                    })
                },
                postOrder(id) {
                    this.$prompt('请输入运单号', '发货', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                    }).then(({ value }) => {
                        adminApi_posterOrder({id, post_no: value}).then(res => {
                            this.$message.success('发货成功')
                            this.getOrderList()
                        })

                    })
                }
            },
        })
    </script>
    </body>

@endsection
